<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>组件高级用法__动态组件</title>
</head>
<body>

<div id="app">
    <component :is="currentView"></component>
    <button @click="handleChangeView('A')">切换到A</button>
    <button @click="handleChangeView('B')">切换到B</button>
    <button @click="handleChangeView('C')">切换到C</button>
</div>

<hr>


<div id="app1">
    <component :is="currentView"></component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     *
     * Vue.js提供了一个特殊的元素<component>用来动态地挂载不同的组件，使用is特性来选择要挂载的组件。
     *
     **/


    //动态地改变currentView的值就可以动态挂载组件了。
    var app = new Vue({
        el: "#app",
        components: {
            comA: {
                template: "<div>组件A</div>"
            },
            comB: {
                template: "<div>组件B</div>"
            },
            comC: {
                template: "<div>组件C</div>"
            }
        },
        data: {
            currentView: "comA",
        },
        methods: {
            handleChangeView: function (component) {
                this.currentView = "com" + component;
            }
        }
    });

    //其实也是可以直接将其绑定在组件对象上
    var home = {
        template:"<p>Welcome home!</p>"
    };

    var app1 = new Vue({
        el:"#app1",
        data:{
            currentView:home,
        }
    })


</script>
</body>
</html>
